import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.material.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp

@Composable
fun PhoneLoginCompose(
    accountPhone: String,
    accountCode: String,
    onPhoneValue: (String) -> Unit,
    onCodeValue: (String) -> Unit
) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Spacer(modifier = Modifier.height(40.dp))
        // 用户名输入框
        OutlinedTextField(
            singleLine = true,
            modifier = Modifier.fillMaxWidth(),
            value = accountPhone,
            onValueChange = { onPhoneValue(it) },
            placeholder = {
                Text(
                    "请输入手机号", style = MaterialTheme.typography.body1,
                    color = Color(0xFF8A8F99)
                )
            },
            colors = TextFieldDefaults.outlinedTextFieldColors(
                backgroundColor = Color.White,
                unfocusedBorderColor = Color(0xFFE4E7ED),
                focusedBorderColor = Color(0xFF1BD184)
            )
        )
        Spacer(modifier = Modifier.height(40.dp))
        // 密码输入框
        OutlinedTextField(
            singleLine = true,
            modifier = Modifier.fillMaxWidth(),
            value = accountCode,
            onValueChange = { onCodeValue(it) },
            placeholder = {
                Text(
                    "请输入验证码", style = MaterialTheme.typography.body1,
                    color = Color(0xFF8A8F99)
                )
            },
            colors = TextFieldDefaults.outlinedTextFieldColors(
                backgroundColor = Color.White,
                unfocusedBorderColor = Color(0xFFE4E7ED),
                focusedBorderColor = Color(0xFF1BD184)
            ),
            trailingIcon = {
                TextButton(onClick = {}) {
                    Text("获取验证码", color = Color(0xFF1BD184), style = MaterialTheme.typography.h6)
                }
            }
        )
    }
}